<template>
	<view v-if="isShow" :style="{'padding-top':statusBarHeight + 'px'}" :class="[hidePage ? 'hide' : '']">
		<image class="topImage" src="../../static/icons/homeIcon/banner1.jpg"></image>
		<view class="wrap">
			<view class="navigate-item trans-nav-item">
				<image src="../../static/image/user-title.png" mode=""></image>
				<text class="navigate-text">*泰&nbsp&nbsp(4*****************9)</text>
				<text class="navigate-icon uni-icon">&#xe470;</text>
			</view>
			<view class="page-title">
				<view class="navigate-title">
					热门服务
				</view>
				<view class="saoyisao" @click="goScan">
					<image class="saoyisaoIcon" src="../../static/icons/home2Icon/saoyisao.jpg"></image>
					<text>扫一扫</text>
				</view>
			</view>
			<view class="navigate-item" @click="gonavigate">
				<view class="navigate-wrap">
					<image class="navigate-logo" src="../../static/icons/home2Icon/1.png"></image>
					<view class="navigate-info">
						<text class="navigate-title">个人房产信息查询</text>
						<text class="navigate-subTitle">提供个人名下房产信息查询服务</text>
					</view>
				</view>
				<text class="navigate-icon uni-icon">&#xe470;</text>
			</view>
			<view class="navigate-item" @click="gonavigate">
				<view class="navigate-wrap">
					<image class="navigate-logo" src="../../static/icons/home2Icon/2.png"></image>
					<view class="navigate-info">
						<text class="navigate-title">购房资格认定及意向登记</text>
						<text class="navigate-subTitle">提供全市购房资格认定及意向登记服务</text>
					</view>
				</view>
				<text class="navigate-icon uni-icon">&#xe470;</text>
			</view>
			<view class="navigate-item" @click="gonavigate">
				<view class="navigate-wrap">
					<image class="navigate-logo" src="../../static/icons/home2Icon/3.png"></image>
					<view class="navigate-info">
						<text class="navigate-title">购房资金入账情况查询</text>
						<text class="navigate-subTitle">查询个人购房资金入账情况</text>
					</view>
				</view>
				<text class="navigate-icon uni-icon">&#xe470;</text>
			</view>
			<view class="navigate-item" @click="gonavigate">
				<view class="navigate-wrap">
					<image class="navigate-logo" src="../../static/icons/home2Icon/4.png"></image>
					<view class="navigate-info">
						<text class="navigate-title">业主决策电子投票系统</text>
						<text class="navigate-subTitle">提供业务线上投票功能(试运行)</text>
					</view>
				</view>
				<text class="navigate-icon uni-icon">&#xe470;</text>
			</view>
			<view class="navigate-item" @click="gonavigate">
				<view class="navigate-wrap">
					<image class="navigate-logo" src="../../static/icons/home2Icon/5.png"></image>
					<view class="navigate-info">
						<text class="navigate-title">住房租赁综合服务</text>
						<text class="navigate-subTitle">提供线上住房租赁服务功能</text>
					</view>
				</view>
				<text class="navigate-icon uni-icon">&#xe470;</text>
			</view>
			<view class="page-bottom">
				<text>武汉市住房保障和房屋管理局 主办</text>
				<text>1.7.15</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				hidePage: false,
				statusBarHeight: 0,
				safeAreaInsets: 0,
				isShow: false,
			};
		},
		methods: {

			...mapGetters(['getstatusBarHeight', 'getSaInsetBottom']),
			gonavigate() {
				uni.navigateTo({
					url: '/pages/homeSearch/index'
				})
			},
			goScan() {
				uni.scanCode({
					success: function(res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
					}
				});
			}
		},
		mounted() {
			this.statusBarHeight = this.getstatusBarHeight();
			this.safeAreaInsets = this.getSaInsetBottom();
			let time = Date.parse('2023-06-20 10:10:00')
			let currentTime = Date.parse(new Date())
			if (currentTime > time) {
				this.hidePage = true
			};
			this.$nextTick(() => {
				uni.navigateTo({
					url: "/pages/searchDetail/index"
				})
				setTimeout(() => {
					this.isShow = true;
				}, 500)
				// setTimeout(() => {
				// }, 1)
			})
		},
		onShow() {
			setTimeout(() => {
				this.isShow = true;
			}, 500)
			setTimeout(_=>{
				uni.navigateTo({
					url: "/pages/searchDetail/index"
				})
			},550)
		},
		onHide() {
			this.isShow = false;
		}
	};
</script>

<style>
	.hide {
		display: none;
	}

	.topImage {
		width: 100%;
		height: 350rpx;
		display: block;
	}

	.wrap {
		padding: 0 40rpx;
	}

	.navigate-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		background-color: #ffffff;
		border-top-style: solid;
		border-top-color: #f0f0f0;
		border-top-width: 1px;
		padding: 12px;
		margin-bottom: 20rpx;
		box-shadow: 0px 5px 8px 0px rgba(0, 0, 0, 0.06);
		/* #ifdef H5 */
		cursor: pointer;
		/* #endif */
		position: relative;
	}

	.trans-nav-item {
		transform: translateY(-20rpx);
		border-radius: 8px;
	}

	.trans-nav-item image {
		width: 60rpx;
		height: 60rpx;
		margin-right: 15rpx;
	}

	.navigate-item:active {
		background-color: #f8f8f8;
	}

	.navigate-text {
		flex: 1;
		color: #000000;
		font-size: 14px;
		font-weight: normal;
	}

	.navigate-icon {
		margin-left: 15px;
		color: #999999;
		font-size: 14px;
		font-weight: normal;
		display: block;
		position: absolute;
		top: 50%;
		right: 30rpx;
		transform: translateY(-50%);
	}

	.navigate-wrap {
		display: flex;
		align-items: center;
	}

	.navigate-logo {
		width: 100rpx;
		height: 100rpx;
		margin-right: 20rpx;
	}

	.navigate-info {
		display: flex;
		flex-direction: column;
	}

	.navigate-title {
		font-size: 36rpx;
		font-weight: 800;
		margin-bottom: 20rpx;

	}

	.navigate-subTitle {
		font-size: 24rpx;
		color: #A0A0A0;
	}

	.page-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 40rpx 0 20rpx 0;
	}

	.page-title .navigate-title {
		margin-bottom: 0 !important;
	}

	.saoyisao {
		font-size: 28rpx;
		display: flex;
		align-items: center;
	}

	.saoyisaoIcon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}

	.page-bottom {
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #CFCFCF;
		margin-top: 40rpx;
	}
</style>